<template>
  <div>
    <h3>{{ question1.text }}</h3>
    <a-checkbox-group v-model:value="answer1['answer']" @change="handleRadioChange1">
      <a-checkbox
          v-for="option in question1.options"
          :key="option.value"
          :value="option.value"
          @click="handleRadioClick1"
      >
        {{ option.text }}
      </a-checkbox>
    </a-checkbox-group>
  </div>
</template>

<script setup>
  import {defineProps} from 'vue';
  import {useQuestions} from "@/utils/paper.js";
  const { getQuestionById,getAnswerById,handleJumpLogic} = useQuestions()
  const props = defineProps({
    questionId:{
      type:String
    }
  });
  const questionId=props.questionId;
  const question1=getQuestionById(questionId);
  const answer1=getAnswerById(questionId);
  const jumpLogic1=question1?.ruleLogic?.jumpLogic;// 该题的跳题逻辑
  // 实现排他
  const handleRadioChange1=(e)=>{
    /*实现排他*/
    // 跳题是对当前的答案数组进行查询，所以改答案数组的排他应该先进行
    /*实现跳题*/
    jumpLogic1.forEach(rule=>{
      if(rule.isUsing===true&&!answer1['answer'].includes(rule.matchValue)){
        // 之前被选中后面又被取消的
        handleJumpLogic(question1.questionId,rule.targetQuestionId,true);
        rule.isUsing=false;
      }else if(rule.isUsing===false&&answer1['answer'].includes(rule.matchValue)){
        handleJumpLogic(question1.questionId,rule.targetQuestionId,false);
        rule.isUsing=true;
      }
    })
  }
  // 实现排他
  // checkbox的click事件发生在group的change事件之前，所以可以达到先处理排他的效果
  const handleRadioClick1 = (e) => {
    /*实现排他逻辑*/
    // 获取最后一个选中的值
    const newSelectedValue = e.target.value;

    // 查找新选中的值的排他规则
    const exclusiveRule = question1.ruleLogic.exclusive.find(rule => rule.value === newSelectedValue);

    if (exclusiveRule) {
      exclusiveRule.exclusive.forEach(exclusiveValue => {
        // 如果选中了与当前选中值互斥的值，则取消选择
        if (answer1['answer'].includes(exclusiveValue.toString())) {
          answer1['answer'] = answer1['answer'].filter(value => value !== exclusiveValue.toString());
        }
      });
    }
  };
</script>
